<template>
  <div class="home">
    <div class="container">
      <!-- 地址导航 -->
      <div class="header">
        <van-search
          shape="round"
          v-model="value"
          placeholder="请输入搜索关键词"
          @click="toSearch"
        />
        <div class="toMap" @click="toMap">
          <div class="toMap-txt">{{ city }}</div>
          <van-icon name="arrow-down" />
        </div>
      </div>

      <!-- 轮播 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in dataList.banner" :key="item.id">
          <img class="banner" :src="item.image_url" alt="" />
        </van-swipe-item>
      </van-swipe>

      <!-- 图标跳转页 -->
      <ul class="imgTo">
        <li
          class="imgToBox"
          v-for="item in dataList.channel"
          :key="item.id"
          @click="toDetail(item.id)"
        >
          <img class="img" :src="item.icon_url" alt="" />
          {{ item.name }}
        </li>
      </ul>
    </div>

    <div class="container-mid">
      <!-- 品牌制造商直供 -->
      <div class="brandTxt" @click="toBrand">
        <p>品牌制造商直供</p>
      </div>

      <ul class="brandList">
        <li
          class="brandList-item"
          v-for="item in dataList.brandList"
          :key="item.id"
          @click="toBrandList(item.id)"
        >
          <div class="brandListTxt">
            <div>{{ item.name }}</div>
            <div class="b-txt">{{ item.floor_price }}起</div>
          </div>
          <img :src="item.new_pic_url" alt="" />
        </li>
      </ul>

      <!-- 新品首发 -->
      <img
        class="bannerImg"
        @click="toList(1)"
        src="../../assets/new.png"
        alt=""
      />
      <ul class="newGoods">
        <li
          v-for="item in dataList.newGoods"
          :key="item.id"
          class="newGoods-item"
          @click="toGoodsDetail(item.id)"
        >
          <img class="img" :src="item.list_pic_url" alt="" />
          <div class="newGoods-name">
            <span>{{ item.name }}</span>
          </div>
          <div class="newGoods-brief">
            <span>{{ item.goods_brief }}</span>
          </div>
          <div class="newGoods-price">
            <span>${{ item.retail_price }}</span>
          </div>
        </li>
      </ul>

      <!-- 人气精选 -->
      <img
        class="bannerImg"
        src="../../assets/hot.png"
        alt=""
        @click="toList(2)"
      />
      <ul class="newGoods">
        <li
          v-for="item in dataList.hotGoods"
          class="newGoods-item"
          :key="item.id"
          @click="toGoodsDetail(item.id)"
        >
          <img class="img" :src="item.list_pic_url" alt="" />
          <div class="newGoods-name">
            <span>{{ item.name }}</span>
          </div>
          <div class="newGoods-brief">
            <span>{{ item.goods_brief }}</span>
          </div>
          <div class="newGoods-price">
            <span>${{ item.retail_price }}</span>
          </div>
        </li>
      </ul>

      <!-- 专题精选 -->
      <div class="topic">
        <div class="brandTxt">
          <p>专题精选</p>
        </div>
        <ul class="topicList">
          <li
            v-for="item in dataList.topicList"
            class="topicList-item"
            :key="item.id"
            @click="toGoodsDetail(item.id)"
          >
            <img class="img" :src="item.scene_pic_url" alt="" />
            <div class="topicList-item-txt">
              <div class="topicList-item-txt-l">
                <span class="txt-t">{{ item.title }}</span>
                <span class="txt-b">{{ item.subtitle }}</span>
              </div>
              <span class="topicList-item-txt-r">{{ item.price_info }}起</span>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div>
      <div v-for="item in dataList.newCategoryList" :key="item.id">
        <div class="brandTxt">
          <div class="color-item">
           <span class="txt-l">{{ item.name }}</span>
            <div class="line"
            :style="{
              'background-image':
                'linear-gradient(135deg,#' +
                randomColor() +
                ' 0%,' + '#' +
                randomColor() +
                ' 100%)',
            }"
          ></div>
          <span class="txt-r">好物</span>
          </div>

        </div>

        <ul class="newGoodList">
          <li
            class="newGoodList-item"
            v-for="el in item.goodsList"
            :key="el.id"
            @click="toGoodsDetail(el.id)"
          >
            <img class="img" :src="el.list_pic_url" alt="" />
            <div class="goods-txt">
              <span class="txt-t">{{ el.name }}</span>
              <span class="txt-b">${{ el.retail_price }}</span>
            </div>
          </li>
          <li @click="toDetail(item.id)">
            <span>{{ item.name }}好物</span>
            <img src="@/assets/next.png" alt="" />
          </li>
          <li></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { start } from '@/api/home/home.js'
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import AMap from 'AMap'

export default {
  name: 'HomeApi',
  setup () {
    const store = useStore()
    const cityDetail = store.state.cityDetail
    const city = ref('')
    const value = ref('')
    const dataList = ref([])
    const goodsId = ref('')
    const router = useRouter()
    const toSearch = () => {
      router.push('/home/search')
    }
    onMounted(() => {
      init()
    })
    // 如果vuex里的cityDetail.name为真(有值),将值赋给当前城市名
    function init () {
      if (cityDetail.name) {
        city.value = cityDetail.name
      } else {
        AMap.plugin('AMap.CitySearch', function () {
          const citySearch = new AMap.CitySearch()
          citySearch.getLocalCity(function (status, result) {
          // console.log(result);

            if (status === 'complete' && result.info === 'OK') {
            // 查询成功，result即为当前所在城市信息
              console.log(result)
              city.value = result.city
            }
          })
        })
      }
    }

    // })
    start().then(res => {
      dataList.value = res
      console.log('dataList', dataList)
    })
    const toMap = () => {
      router.push('/home/map')
    }
    const randomColor = () => {
      return Math.random().toString(16).slice(-6)
    }
    const toList = (id) => {
      router.push({ path: '/home/list', query: { id: id } })
    }
    const toDetail = (id) => {
      // this.id=id
      router.push({ path: '/kind/list', query: { id: id } })
    }
    const toBrand = () => {
      router.push('/home/brand')
    }
    const toBrandList = (id) => {
      router.push({ path: '/home/brandList', query: { id: id } })
    }
    const toGoodsDetail = (id) => {
      goodsId.value = id
      router.push({
        path: '/home/goodsDetail',
        query: { id: goodsId.value }
      })
    }
    console.log('dataList', dataList)
    return {
      value,
      dataList,
      randomColor,
      toSearch,
      toGoodsDetail,
      toList,
      toDetail,
      toBrand,
      toBrandList,
      city,
      toMap,
      AMap
    }
  }

}
</script>

<style lang="scss" scoped>
@import './sass/index.scss';
</style>
